<template>
  <el-tabs v-model="currentTab" type="border-card" class="j-tabs" @tab-change="onTabChange">
    <el-tab-pane name="1" label="流量记录">
      <div class="tc-main mt-0">
        <div class="item">
          <img src="@/assets/houtai_2_03.png" alt="" class="image" />
          <div class="info">
            <p>
              <span>{{ formatTraffic(getUserInfo.traffic).traffic }}</span> {{ formatTraffic(getUserInfo.traffic).unit }}
            </p>
            <p>剩余流量</p>
          </div>
        </div>
        <div class="item">
          <img src="@/assets/houtai_2_05.png" alt="" class="image" />
          <div class="info">
            <p>
              <span>{{ formatTraffic(getUserInfo.total_traffic).traffic }}</span> {{ formatTraffic(getUserInfo.total_traffic).unit }}
            </p>
            <p>累计充值流量</p>
          </div>
        </div>
        <div class="item">
          <img src="@/assets/houtai_2_07.png" alt="" class="image" />
          <div class="info">
            <p>
              <span>{{ formatTraffic(getUserInfo.consume_traffic).traffic }}</span> {{ formatTraffic(getUserInfo.consume_traffic).unit }}
            </p>
            <p>累计消耗流量</p>
          </div>
        </div>
      </div>
      <div class="mt-20">
        <el-table :data="result.trafficData" border stripe style="width: 100%" class="j-table mt-0">
          <el-table-column prop="create_day" label="统计时间" />
          <el-table-column prop="total" label="使用流量">
            <template #default="scope">
              <span>{{ scope.row.total }}M</span>
            </template>
          </el-table-column>
          <el-table-column prop="upload_flow" label="上传流量">
            <template #default="scope">
              <span>{{ scope.row.upload_flow }}M</span>
            </template>
          </el-table-column>
          <el-table-column prop="download_flow" label="下载流量">
            <template #default="scope">
              <span>{{ scope.row.download_flow }}M</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="j-pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="result.trafficPage"
            :pageSize="result.trafficLimit"
            :total="result.trafficTotal"
            @current-change="
              (val) => {
                onCurrentChange('traffic', val);
              }
            "
          />
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane name="2" label="购买记录">
      <div class="mt-0">
        <el-table :data="result.orderData" border stripe style="width: 100%" class="j-table mt-0">
          <el-table-column prop="order_nu" label="订单号" />
          <el-table-column prop="proxy_type" label="代理类型" />
          <el-table-column prop="goods_info" label="产品类型" />
          <el-table-column prop="pay_way_str" label="支付方式" />
          <el-table-column prop="amount" label="支付金额">
            <template #default="scope">
              <span>${{ scope.row.amount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="订单时间" />
          <el-table-column prop="status_str" label="订单状态" />
        </el-table>
        <div class="j-pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="result.orderPage"
            :pageSize="result.orderLimit"
            :total="result.orderTotal"
            @current-change="
              (val) => {
                onCurrentChange('order', val);
              }
            "
          />
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '@/store/modules/user';
  import { formatTraffic } from '@/utils/index';

  const route = useRoute();
  const router = useRouter();
  const userStore = useUserStore();

  const getUserInfo = computed(() => {
    let userInfo = userStore.getUserInfo || {};
    return userInfo;
  });

  const props = defineProps<{
    result: Object;
  }>();

  const emits = defineEmits<{
    (event: 'confirm'): void;
    (event: 'page-change'): void;
  }>();

  const currentTab = ref('');

  const onCurrentChange = (type, val) => {
    emits('page-change', type, val);
  };

  const onTabChange = (val) => {
    if (val == '1') {
      emits('page-change', 'traffic', 1);
    } else if (val == '2') {
      emits('page-change', 'order', 1);
    }
  };

  watch(
    () => props.result,
    () => {
      currentTab.value = props.result.currentTab;
    },
    { deep: true, immediate: true },
  );

  onMounted(() => {});
</script>

<style scoped lang="scss"></style>
